<template>
  <!-- <div>退役单</div> -->
  <div class="container">
    <div class="title">
      <el-icon style="right: 6px">
        <Operation />
      </el-icon>
      <span>退役单</span>
    </div>
    <div class="body">
      <el-table
        :data="pageData.tableParams.tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="fOrderCategory"
          width="120"
          label="单别"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="fOrderNumber"
          min-width="120"
          label="单号"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="fOrgName"
          width="100"
          label="单位"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="fOrderTime"
          min-width="120"
          label="单据日期"
          align="center"
          :formatter="formatterTime"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="fApprovalNumber"
          width="100"
          label="批准文号"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="fState" label="状态" min-width="120">
          <template #default="v">
            <span>{{
              v.row.fState == 0
                ? "草稿"
                : v.row.fState == 10
                ? "审核中"
                : v.row.fState == 20
                ? "作废"
                : "审核通过"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fRemark" label="备注" width="180" />
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="onHandleEdit(row)"
              >详情</el-button
            >

            <!-- <el-button type="primary" size="small" @click="onHandleDel(row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页查询 -->
      <el-col :span="24">
        <el-pagination
          style="margin-top: 20px"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="pageData.tableParams.pageSizeOptions"
          :current-page="pageData.queryParams.page"
          :page-size="pageData.queryParams.pageSize"
          :total="pageData.tableParams.totalCount"
          @current-change="onHandleCurrentChange"
          @size-change="onHandleSizeChange"
        >
        </el-pagination>
      </el-col>

      <el-dialog
        v-model="pageData.editDialogVisible"
        :title="pageData.editDialogTitle"
        :width="800"
        fullscreen="true"
        :close-on-click-modal="false"
        destroy-on-close
        custom-class="editDialog-class"
      >
        <edit
          :modifyObj="pageData.currentRow"
          :isAdd="pageData.isAdd"
          @Ok="onOk"
          @Cancel="() => (pageData.editDialogVisible = false)"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import { Operation } from "@element-plus/icons-vue";
import edit from "./edit.vue";
import utils from "@/common/utils";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";

import { retireBill_selectAll } from "@/api/Retirement/RetirementBill";

export default {
  components: { Operation, edit },
  setup() {
    onMounted(() => {
      getTableData();
    });
    const pageData = reactive({
      queryParams: {
        page: 1,
        pageSize: 10,
      },
      tableParams: {
        tableLoading: false,
        tableHeight: 0,
        pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
        totalCount: 0,
        tableData: [],
      },
      currentRow: {},
      editDialogTitle: "退役单",
      editDialogVisible: false,
      isAdd: false,
    });
    // 时间
    const formatterTime = (row, column) => {
      let data = row[column.property];
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
    };

    // 分页查询
    const onHandleCurrentChange = (e) => {
      console.log("e", e);
      pageData.queryParams.page = e;
      getTableData();
    };
    const onHandleSizeChange = (e) => {
      pageData.queryParams.page = 1;
      pageData.queryParams.pageSize = e;
      getTableData();
    };
    // 获取装备信息表格数据
    const getTableData = () => {
      pageData.currentRow = {};
      pageData.tableParams.tableLoading = true;
      retireBill_selectAll(pageData.queryParams)
        .then((res) => {
          console.log("res", res);
          pageData.tableParams.tableData = res.list;
          pageData.tableParams.totalCount = res.totalCount;
          pageData.tableParams.tableLoading = false;
        })
        .catch((error) => {
          ElMessage.error(error.message || "请求出错");
          pageData.tableParams.tableLoading = false;
        });
    };
    const onOk = ({ isAdd, retObj }) => {
      pageData.isAdd = isAdd;
      pageData.editDialogVisible = false;
      getTableData();
    };

    // 详情
    const onHandleEdit = (row) => {
      // console.log("行", row);
      pageData.currentRow = {};
      if (utils.isEmpty(row)) {
        ElMessage.warning("请选中需要操作的数据行");
        return;
      }
      pageData.currentRow = row;
      pageData.editDialogVisible = true;
      pageData.editDialogTitle = "详情";
      pageData.isAdd = false;
    };

    return {
      pageData,
      onHandleCurrentChange,
      onHandleSizeChange,
      getTableData,
      onHandleEdit,
      onOk,
      formatterTime,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: white;
  height: 100%;
  padding-top: 20px;
  .title {
    color: #e78784;
    font-size: 16px;
    font-weight: 600;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
  .left {
    width: 20%;
    display: flex;
    margin-left: 20px;
    padding: 20px 0;
    .button {
      margin-left: 10px;
    }
  }
  .body {
    margin: 20px;
  }
}
// .el-dialog {
//   display: flex;
//   flex-direction: column;
//   margin: 0 !important;
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
//   user-select: none;
// }

.el-dialog .el-dialog__body {
  padding: 20px 0;
}
:deep(.el-dialog .el-dialog__header) {
  padding: 20px 0;
  padding-left: 20px;
  margin: 0;
  word-break: break-all;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
</style>
